<style lang="less" scoped>
    .main_allScroll {
        background-color: #000;
        background-image: url("../../assets/img/autumnGame_bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .v-transfer-dom > .vux-popup-dialog.vux-popup-top {
        height: 100% !important;
        background-color: transparent;
        .start_before {
            width: 4.78rem;
            height: 5.85rem !important;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-image: url("../../assets/img/autumnGame_gameStart.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: transparent;
            display: flex;
            padding-bottom: .36rem;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            .text{
                font-size: .24rem;
                color: #ffe155;
                text-decoration:underline;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%,.54rem);
            }
        }
        .game_end{
            width: 4.78rem;
            height: 5.85rem !important;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-image: url("../../assets/img/autumnGame_gameEnd.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: transparent;
            display: flex;
            padding-bottom: .48rem;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            img{
                width: 2.8rem;
                display: block;
            }
        }
        .stateButton {
            width: 2.48rem;
            height: .74rem;
            background-image: url("../../assets/img/autumnGame_startButton.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: transparent;
        }
        .endButton{
            width: 2.48rem;
            height: .74rem;
            background-image: url("../../assets/img/autumnGame_endButton.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: transparent;
        }
        .openButton{
            width: 2.48rem;
            height: .74rem;
            background-image: url("../../assets/img/autumnGame_openButton.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: transparent;
        }
        .startText {
            margin-bottom: .16rem;
            color: #ed392d;
            font-size: .26rem;
            font-weight: 600;
        }
        .endTitle{
            font-size: .54rem;
            color: #252525;
            line-height: .62rem;
            font-weight: bold;
        }
        .endText{
            margin-bottom: .36rem;
            color: #252525;
            font-size: .36rem;
        }
    }

    .gameInfo {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        tap-highlight-color: rgba(0, 0, 0, 0);
        z-index: -1;
        opacity: 0;
        -webkit-transition: opacity 400ms;
        -o-transition: opacity 400ms;
        -moz-transition: opacity 400ms;
        transition: opacity 400ms;
        font-size: 3.34rem;
        color: #ED392d;
        display: flex;
        justify-content: center;
        align-items: center;
        text-shadow: 2px 4px #bf1c11, 2px 4px #bf1c11, 2px 4px #bf1c11, 2px 4px #bf1c11
    }

    .gameInfo.info {
        z-index: 500;
        opacity: 1;
    }

    .gameStart {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        tap-highlight-color: rgba(0, 0, 0, 0);
        z-index: -1;
        opacity: 0;
        -webkit-transition: opacity 400ms;
        -o-transition: opacity 400ms;
        -moz-transition: opacity 400ms;
        transition: opacity 400ms;
        &.info {
            z-index: 500;
            opacity: 1;
        }
    }


    .autumnGame_beauty {
        width: 2.27rem;
        height: 2.68rem;
        background-image: url("../../assets/img/autumnGame_beauty.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: transparent;
        position: absolute;
        bottom: 0;
        &.right {
            transform: scaleX(-1);
        }
        ul{
            position: absolute;
            top: -1rem;
            left: 0;
            width: 100%;
            li{
                padding: .1rem 0;
                display: flex;
                justify-content: center;
                align-items: center;
                &.right {
                    transform: scaleX(-1);
                }
                span{
                    font-size: .42rem;
                    color: #fced95;
                    &.pig{
                        color: #ed655d;
                    }
                }
            }
        }
    }

    .cakeBox {
        li {
            background-image: url("../../assets/img/autumnGame_cake.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: transparent;
            position: absolute;
            &.pig {
                background-image: url("../../assets/img/autumnGame_pig.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }
    }

    .game_time {
        position: absolute;
        left: .44rem;
        top: .55rem;
        font-size: .3rem;
        color: #fff;
        font-weight: 700;
        &.right {
            left: auto;
            right: .44rem;
        }
        span {
            color: #ED392d;
            font-size: .7rem;
            text-shadow: 1px 1px #0d0509, 1px 1px #0d0509,
            1px 1px #0d0509, 1px 1px #0d0509
        }

    }
    .cake_icon {
        display: inline-block;
        width: .48rem;
        height: .48rem;
        background-image: url("../../assets/img/autumnGame_cake.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: transparent;
        transform: translateY(3px);
    }
    .pig_icon {
        display: inline-block;
        width: .48rem;
        height: .48rem;
        background-image: url("../../assets/img/autumnGame_pig.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: transparent;
        transform: translateY(3px);
    }

</style>
<style lang="less" scoped>
    @import "../../less/_variable";
    .v-transfer-dom.myPrizes > .vux-popup-dialog.vux-popup-top {
        width: 80.53%;
        height: auto !important;
        position: absolute;
        left: 9.73%;
        top: 15%;
        border-radius: 0.2rem;
        background: #fff;

        .vux-scrollable {

            .show_header_title {

                .title {
                    margin: 0.42rem 0;
                    font-size: 0.34rem;
                    color: #333;
                    text-align: center;
                }

                span {
                    width: 0.3rem;
                    height: 0.3rem;
                    background: url('../../assets/img/close.png') no-repeat center center;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0.3rem;
                    right: 0.3rem;
                }

            }
            .show_list {
                width: 100%;
                height: 8rem;
                overflow: hidden;
                border-top: 1px solid #efefef;
                position: relative;
                .list_cont {
                    display: flex;
                    padding-left: .16rem;
                    .fight_left {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        align-items: center;
                        padding: .12rem 0 .06rem;
                        border-bottom: 1px solid #f5f5f5;
                        &:last-child{
                            border: none;
                        }
                        img {
                            width: 1.1rem;
                            height: .6rem;
                        }

                        .list_time {
                            margin-top: 0.2rem;
                            margin-left: 0.16rem;
                            .name {
                                color: #222;
                                font-size: .28rem;
                                margin-bottom: 0.16rem;
                            }

                            .time {
                                color: #909090;
                                font-size: .24rem;
                            }

                        }
                    }
                }
            }
            .show_bottom{
                border-top: 1px solid #efefef;
                padding: .42rem 0.2rem .54rem;
                text-align: center;
                font-size: .24rem;
                line-height: 1.5;
                .select{
                    color: @c_lordColor;
                }
            }
        }
    }
</style>
<template>
    <div>
        <v-header :title="title">
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <div ref="advertBox" :class="gameStatus == 'game' ? 'info' : ''" class="gameStart" @touchstart="touchStart"
                 @touchmove="touchMove" @touchend="touchEnd">
                <div class="game_time">倒计时 <span>{{game.time}}</span> s</div>
                <div class="game_time right"><i class="cake_icon"></i> X <span>{{game.fraction}}</span></div>
                <ul class="cakeBox">
                    <li v-for="v in cakeArr" :class="!v.isCake ? 'pig' : ''"
                        :style="{width:v.width + 'px',height:v.width + 'px',top:v.top + 'px',left:v.left + 'px'}"></li>
                </ul>
                <div ref="advert" class="autumnGame_beauty" :class="beauty.position == 'right'? 'right' : ''"
                     :style="{left:beauty.left + 'px'}">
                    <ul>
                        <li v-for="v in beauty.function" :class="beauty.position == 'right'? 'right' : ''">
                            <i v-if="v.isCake" class="cake_icon"></i>
                            <i v-if="!v.isCake" class="pig_icon"></i>
                            <span :class="!v.isCake ? 'pig' : ''">{{v.text}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="gameInfo" :class="gameStatus == 'start' ? 'info' : ''">{{countdown}}</div>
        </div>
        <div v-transfer-dom>
            <popup v-model="show" position="top" should-scroll-top-on-show @click.native="gameStatus == 'openAfter' ? gameEnd('startBefore') : ''">
                <div class="start_before" v-show="gameStatus == 'startBefore'">
                    <div class="startText">剩余游戏次数{{frequency}}次</div>
                    <div class="stateButton" @click="gameStart"></div>
                    <div class="text" @click="seeMyPrizes">查看我的奖品</div>
                </div>
                <div class="game_end" v-show="gameStatus == 'end'">
                    <div class="endTitle">非常遗憾</div>
                    <div class="endText">游戏时间结束</div>
                    <div class="endButton" @click="gameEnd('startBefore')"></div>
                </div>
                <div class="game_end" v-show="gameStatus == 'open'">
                    <div class="endTitle">恭喜您</div>
                    <div class="endText">获得中秋福袋</div>
                    <div class="openButton" @click="gameEnd('openAfter')"></div>
                </div>
                <div class="game_end" v-show="gameStatus == 'openAfter'">
                   
                    <img v-show="prizes.prizesType == 1" v-lazy="{src:prizes.prizesPrice == 5 ? autumnGame_red_5 : prizes.prizesPrice == 10 ? autumnGame_red_10 : prizes.prizesPrice == 15 ? autumnGame_red_15 : prizes.prizesPrice == 20 ? autumnGame_red_20 : '' }" alt="">
                    <img v-show="prizes.prizesType == 3" v-lazy="{src:autumnGame_ticket_10}" alt="">
                    <img v-show="prizes.prizesType == 4" v-lazy="{src:autumnGame_treasure}" alt="">
                    <div class="endText" style="margin-bottom: 0;margin-top: .36rem">获得{{prizes.prizesType == 1 ? '红包': prizes.prizesType == 2 ? '实物': prizes.prizesType == 3 ? '优惠券': prizes.prizesType == 4 ? '宝石券': ''  }}*{{prizes.prizesNumber}}</div>
                </div>
            </popup>
        </div>
        <div v-transfer-dom class="myPrizes">
            <popup v-model="myPrizesShow" position="top" should-scroll-top-on-show :hide-on-blur="false">
                <div scrollable class="vux-scrollable">
                    <div class="show_header_title">
                        <div class="title">领奖记录</div>
                        <span @click="closeMyPrizes"></span>
                    </div>
                    <div class="show_list">
                        <scroller :on-infinite="loadMore ? infinite : getDone" ref="qixiScroller">
                            <div class="list_cont" v-for="prizes in prizesList">
                                <div class="fight_left">
                                    <img v-show="prizes.prizesType == 1" v-lazy="{src:prizes.prizesPrice == 5 ? autumnGame_red_5 : prizes.prizesPrice == 10 ? autumnGame_red_10 : prizes.prizesPrice == 15 ? autumnGame_red_15 : prizes.prizesPrice == 20 ? autumnGame_red_20 : '' }" alt="">
                                    <img v-show="prizes.prizesType == 3" v-lazy="{src:autumnGame_ticket_10}" alt="">
                                    <img v-show="prizes.prizesType == 4" v-lazy="{src:autumnGame_treasure}" alt="">
                                    <div class="list_time">
                                        <p class="name">{{prizes.prizesType == 1 ? '红包': prizes.prizesType == 2 ? '实物': prizes.prizesType == 3 ? '优惠券': prizes.prizesType == 4 ? '宝石券': ''  }}*{{prizes.prizesNumber}}</p>
                                        <p class="time">{{prizes.confirmTime}}</p>
                                    </div>
                                </div>
                            </div>
                            <load-more v-show="!loadMore" :show-loading="false" tip="我是有底线的" background-color="#fbf9fe"></load-more>
                        </scroller>
                    </div>
                </div>
            </popup>
        </div>
    </div>
</template>
<script>
  import {TransferDom, Popup,LoadMore} from 'vux'
  export default {
    name: 'autumnGame',
    directives: {
      TransferDom
    },
    components: {
      Popup,
      LoadMore
    },
    data() {
      return ({
        title:'嫦娥接月饼',
        autumnGame_red_5: require('../../assets/img/autumnGame_red_5.png'),
        autumnGame_red_10: require('../../assets/img/autumnGame_red_10.png'),
        autumnGame_red_15: require('../../assets/img/autumnGame_red_15.png'),
        autumnGame_red_20: require('../../assets/img/autumnGame_red_20.png'),
        autumnGame_ticket_10: require('../../assets/img/autumnGame_ticket_10.png'),
        autumnGame_treasure: require('../../assets/img/autumnGame_treasure.png'),
        show: true,
        myPrizesShow:false,
        gameStatus: 'startBefore', // startBefore 开始之前  start 开始  game 游戏中  end 未中奖结束  open 中奖 openAfter 打开之后
        countdown: 3,
        frequency: 0,
        prizesId: '',
        prizes:{},
        beauty: {
          left: 100,
          startX: 0,
          initialX: 100,
          previousLeft: 0,
          position: 'left',
          start: 1,
          function: []
        },
        cakeArr: [],
        game: {
          time: 60,
          fraction: 0
        },
        prizesList:[],
        loadMore:false,
        pageNum:1,
      })
    },
    activated() {
      this.init()
    },
    deactivated() {
      this.gameStatus = 'startBefore'
      this.game.time = 0
    },
    methods: {
      closeMyPrizes(){
        this.myPrizesShow = false
        this.show = true
      },
      seeMyPrizes(){
        if(!this.comJS.getCookie('t')){
          this.Interactive.pushTokentoJS();
          return
        }
        this.show = false
        this.myPrizesShow = true
        this.prizesList = []
        this.loadMore = false
        this.pageNum = 1
        this.queryMyPrizes()
      },
      refresh(done){
        global.myLoad = true
        this.pageNum = 1
        this.prizesList = []
        this.loadMore = false
        this.$refs.qixiScroller.scrollTo(0,this.scrollPos, false)
        this.queryMyPrizes(done)
      },
      infinite(done) {
        global.myLoad = true
        this.$refs.qixiScroller.resize()
        this.loadMore = false
        this.queryMyPrizes(done)
      },
      getDone(done) {
        this.$refs.qixiScroller.finishInfinite(2);
      },
      queryMyPrizes(done){
        this.$ajax.activity.myPrizes({
          pageNum : this.pageNum,
          pageSize:15,
          activityId:'ACTIVITY_AUTUMN',
          confirmStatus:1
        })
          .then((res)=>{
            if(done){
              done()
            }
            if(res.body.content.list && res.body.content.list != null){
              if (this.pageNum == 1){
                this.prizesList = res.body.content.list
              }else{
                this.prizesList = this.prizesList.concat(res.body.content.list)
              }
              if(res.body.content.list.length >= 15){
                this.pageNum++
                this.loadMore = true
              }else{
                this.loadMore= false
              }
            }
          })
      },
      init() {
        if(this.$route.query.t){
           this.title =this.$route.query.t
            this.Interactive.customStatistics({type: 2, eventID: 'activity_area',map: {name: this.title,activityId: this.$route.query.activityId || null}})
        }
        this.show = true
        this.myPrizesShow=false
        this.loadMore=false
        this.pageNum = 1
        this.gameStatus = 'startBefore'
        this.countdown = 3
        this.frequency = 0
        this.prizesId = ''
        this.prizes = {}
        this.prizesList = []
        this.beauty = {
          left: 100,
          startX: 0,
          initialX: 100,
          previousLeft: 0,
          position: 'left',
          start: 1,
          function: []
        },
          this.game = {
            time: 60,
            fraction: 0
          }
        this.cakeArr = []
          this.queryPrizesAndLotteryNumber()
        if(this.comJS.getCookie('t')){
            this.myPrizes()
        }

      },
      queryPrizesAndLotteryNumber(){
        this.$ajax.activity.queryPrizesAndLotteryNumber({activityId:'ACTIVITY_AUTUMN'})
          .then((res)=>{
            this.frequency = res.body.content.lotteryNumber
          })
      },

      turnActiveWheel(){
        this.$ajax.activity.turnActiveWheel({activityId:'ACTIVITY_AUTUMN'})
          .then((res)=>{
            this.gameStatus = 'open'
            this.show = true
            this.prizesId = res.body.content.prizesId
          }).catch(()=>{
            this.show = true
            this.gameStatus = ''
        })
      },
      affirmPrizes(data){
        this.$ajax.activity.affirmPrizes({activityId:'ACTIVITY_AUTUMN',prizesId:this.prizesId})
          .then((res) => {
              this.frequency = res.body.content.lotteryNumber
              this.prizes = res.body.content
            this.show = false
            setTimeout(() =>{this.show = true;this.gameStatus = data}, 400)
          })
      },
      myPrizes(){
        this.$ajax.activity.myPrizes({activityId:'ACTIVITY_AUTUMN',confirmStatus:0})
          .then((res)=>{
            if(res.body.content.list && res.body.content.list.length>0){
              this.prizes = res.body.content.list[res.body.content.list.length -1]
              this.prizesId = this.prizes.prizesId
              this.gameStatus = 'open'
              this.show = true
            }else{
              this.gameStatus = 'startBefore'
              this.show = true
            }
          })
      },
      gameEnd(data){

        if(data == 'openAfter'){
          this.affirmPrizes(data)
        }else{
          this.show = false
          setTimeout(() =>{this.show = true;this.gameStatus = data}, 400)
        }
      },
      gameStart() {

        if(!this.comJS.getCookie('t')){
          this.Interactive.pushTokentoJS();
          return
        }

        this.$ajax.activity.queryPrizesAndLotteryNumber({activityId:'ACTIVITY_AUTUMN'})
          .then((res)=>{
            this.frequency = res.body.content.lotteryNumber
            if(res.body.content.activityStatus == 0){
              this.$vux.alert.show({
                title:'操作提示',
                content:'活动未开始',
              })
              return
            }
            if(res.body.content.activityStatus == 2){
              this.$vux.alert.show({
                title:'操作提示',
                content:'活动已结束',
              })
              return
            }
            if(res.body.content.activityStatus == 1){
                if(this.frequency <= 0){
                  this.$vux.alert.show({
                    title:'操作提示',
                    content:'你还没有游戏次数，快去下单获取吧',
                })
                  return
                }
                this.gameNext()
                setTimeout(() => this.gameStatus = 'start', 400)
                setTimeout(() => this.countdownStart(), 1400)
            }else{
              this.$vux.alert.show({
                title:'操作提示',
                content:'活动不在进行中',
              })
            }
          })

      },
      gameNext(){
        this.game = {
          time: 60,
          fraction: 0
        }
        this.beauty = {
          left: 100,
          startX: 0,
          initialX: 100,
          previousLeft: 0,
          position: 'left',
          start: 0,
          function: []
        }
        this.cakeArr = []
        this.countdown = 3
        this.show = false
      },
      countdownStart() {
        if (this.countdown == 1) {
          this.gameStatus = 'game'
          this.beautyPostion()
          this.cakeStart()
          this.cakeMove()
          this.gameTime()
        }
        this.countdown--
        if (this.countdown > 0 && this.gameStatus == 'start') {
          setTimeout(() => this.countdownStart(), 1000)
        }
      },
      gameTime() {
        if (this.game.time > 0  && this.gameStatus == 'game') {
          setTimeout(() => {
            this.game.time--
            this.gameTime()
          }, 1000)
        }
      },
      /**   嫦娥来喽 */
      beautyPostion() {
        var boxWidth = this.$refs.advertBox.offsetWidth
        var w = this.$refs.advert.offsetWidth
        var advert = this.$refs.advert
        this.beauty.left = (boxWidth - w) / 2
        this.beauty.initialX = (boxWidth - w) / 2
      },
      touchStart(e) {
        e.preventDefault()
        if (this.beauty.start == 1) {
          return
        }
        this.beauty.start = 1
        this.beauty.startX = e.changedTouches[0].pageX
      },
      touchMove(e) {
        if (e.changedTouches[0].pageX > this.beauty.previousLeft) {
          this.beauty.position = 'right'
        } else {
          this.beauty.position = 'left'
        }
        this.beauty.previousLeft = e.changedTouches[0].pageX
        console.log(this.beauty.startX)
        let x = this.beauty.initialX - (this.beauty.startX - e.changedTouches[0].pageX)
        if (x <= 0) {
          x = 0
        }
        if (x > this.$refs.advertBox.offsetWidth - this.$refs.advert.offsetWidth) {
          x = this.$refs.advertBox.offsetWidth - this.$refs.advert.offsetWidth
        }
        this.beauty.left = x

      },
      touchEnd(e) {
        this.beauty.initialX = this.beauty.left
        this.beauty.start = 0
      },

      /** 天降月饼  */
      cakeStart() {

        for (let i = this.cakeArr.length; i < 20; i++) {
          let obj = {
            width: this.$refs.advertBox.offsetWidth / 750 * 140,
            top: -Math.floor(Math.random() * 400),
            left: Math.floor(Math.random() * 300),
            speed: 2,
            isCake: Math.floor(Math.random() * 10) % 2,
            isDouble: Math.floor(Math.random() * 10) % 2
          }
          
          if(obj.isDouble && obj.isCake){
            obj.width = this.$refs.advertBox.offsetWidth / 750 * 194
          }
          if(!obj.isCake){
            obj.width = this.$refs.advertBox.offsetWidth / 750 * 140
          }

          let statu = 0
          this.cakeArr.forEach((v)=>{
            if(!v.isCake){
              statu = 1
              return false
            }
          })
          if(statu == 1){
            obj.isCake = 1
          }else{
            obj.isCake = 0
          }
          if(this.ll(obj)){
            this.cakeArr.push(obj)
          }
        }
      },
      //去重
      ll(obj){
        let sty = 0
        this.cakeArr.forEach((v)=>{
            if(v.top + v.width < obj .top || v.left > obj.left + obj.width || obj.top > v.top + v.width || v.left + v.width < obj.left ){
            }else{
              sty = 1
              return true
            }
        })
        if(sty){
          return false
        }else{
          return true
        }
      },


      cakeMove() {
        let that = this
        this.cakeArr.map((v, i) => {
          v.top = v.top + v.speed
          if (v.top >= that.$refs.advertBox.offsetHeight - v.width - that.$refs.advert.offsetHeight && v.top < that.$refs.advertBox.offsetHeight - v.width) {
            
            if (this.beauty.position == 'left' ?  v.left + v.width >=  that.beauty.left  && v.left <= that.beauty.left + (that.$refs.advert.offsetWidth * 3 / 4) : (v.left + v.width >= (that.$refs.advert.offsetWidth * 1/ 4) + that.beauty.left && v.left <= that.beauty.left + that.$refs.advert.offsetWidth))  {
              if (v.isCake) {
                if (v.isDouble) {
                  that.game.fraction += 2
                } else {
                  that.game.fraction++
                }
              } else {
                that.game.fraction - 3  < 0 ? that.game.fraction = 0  : that.game.fraction-= 3
              }
              this.cakeArr.splice(i, 1)
              this.beauty.function.push({
                isCake:v.isCake,
                text:v.isCake ? v.isDouble ? '+2' : '+1' : '-3'
              })
              if(this.beauty.function.length > 2){
                this.beauty.function.shift()
              }
              this.cakeStart()
            }
          } else if (v.top >= that.$refs.advertBox.offsetHeight - v.width) {
            this.cakeArr.splice(i, 1)
            this.cakeStart()
          }
        })
        if (this.gameStatus == 'game') {
          setTimeout(() => {
            this.cakeMove()
          }, 20)
        }
      },
      gameOver(){
        if(this.game.time > 0 && this.game.fraction >= 10){
          
          this.turnActiveWheel()
        }else if(this.game.time <= 0 && this.game.fraction < 10){
          this.gameStatus = 'end'
          this.show = true
        }
      }
    },
    watch:{
      'game.time':function () {
        if(this.gameStatus == 'game'){
          this.gameOver()
        }
      },
      'game.fraction':function () {
        if(this.gameStatus == 'game'){
          this.gameOver()
        }
      },
      'interactive.refreshUserInfo':function () {
        if(this.interactive.refreshUserInfo.flang){
          this.queryPrizesAndLotteryNumber();
        }
      },
    }
  }
</script>